<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超市账单管理系统</title>
	<style type="text/css">
		/* 头部样式 */
		.el-header {
			background-color: #545c64;
		}

		/* 头部logo图片样式 */
		.header-img {
			margin-top: 15px;
		}

		/* 用户头像样式 */
		.face {
			margin-top: 5px;
			width: 40px;
			height: 40px;
			border-radius: 20px; /* 圆形头像 */
		}
		/* 下拉菜单链接样式 */
		.el-dropdown-link {
			cursor: pointer;
			color: whitesmoke;
			line-height: 60px; /* 垂直居中 */
		}
		/* 下拉箭头样式 */
		.el-icon-arrow-down {
			font-size: 12px;
		}
		/* 文本右浮动 */
		.text{
			float: right;
		}
		/* 头像上传组件样式 */
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF; /*  hover时边框变色 */
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 78px;
			height: 78px;
			line-height: 78px;
			text-align: center;
		}
		.avatar {
			width: 78px;
			height: 78px;
			display: block;
		}
	</style>
	<!-- 引入Element UI样式 -->
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<!-- 引入Vue核心库 -->
	<script src="js/vue.js"></script>
	<!-- 引入Element UI组件库 -->
	<script src="element-ui/lib/index.js"></script>
	<!-- 引入Axios用于HTTP请求 -->
	<script src="js/axios-0.18.0.js"></script>
	<!-- 引入全局配置（包含server_url等基础配置） -->
	<script src="js/server.js" ></script>
</head>
<body>
<div id="div">
	<!-- Element UI布局容器 -->
	<el-container>
		<!-- 头部区域 -->
		<el-header class="el-header" style="height: 60px">
			<!-- 水平排列容器 -->
			<el-container>
				<!-- logo图片及系统名称 -->
				<div>
					<el-image src="img/buy.png" class="header-img"></el-image>
					<div style="margin-top: 20px;float: left;float: right;color: white;font-family: 微软雅黑">超市账单管理系统</div>
				</div>
				<!-- 顶部用户下拉菜单 -->
				<el-dropdown style="margin-left: auto;padding-right: 20px">
					<span class="el-dropdown-link">
						<!-- 用户头像 -->
						<img :src="loginUser.headUrl" class="face"/>
						<!-- 欢迎信息：角色+用户名（添加判空处理避免报错） -->
						<div class="text">{{ loginUser.role && loginUser.role.roleName || '用户' }}:{{ loginUser.userCode || '' }}, 欢迎您<i class="el-icon-arrow-down el-icon--right"></i></div>
					</span>
					<!-- 下拉菜单选项 -->
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="showEditUserView()">个人资料</el-dropdown-item>
						<el-dropdown-item divided @click.native="showEditPwdView()">密码修改</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout()">注销退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-container>
		</el-header>

		<!-- 主内容区容器 -->
		<el-container style="height: 650px; border: 1px solid #eee">
			<!-- 侧边栏导航区域 -->
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)" id="aside">
				<!-- 侧边菜单（默认展开1、2、3项） -->
				<el-menu :default-openeds="['1','2','3']">
					<!-- 供应商管理菜单组 -->
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-menu"></i>供应商管理</template>
						<!-- 添加.native修饰符确保事件触发 -->
						<el-menu-item index="1-1" @click.native="toHtml('providerAdd.html')">
							<i class="el-icon-help"></i>添加供应商
						</el-menu-item>
						<el-menu-item index="1-2" @click.native="toHtml('providerList.html')">
							<i class="el-icon-help"></i>供应商列表
						</el-menu-item>
					</el-submenu>

					<!-- 账单管理菜单组 -->
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-menu"></i>账单管理</template>
						<el-menu-item index="2-1" @click.native="toHtml('billAdd.html')">
							<i class="el-icon-help"></i>添加账单
						</el-menu-item>
						<el-menu-item index="2-2" @click.native="toHtml('billList.html')">
							<i class="el-icon-help"></i>账单列表
						</el-menu-item>
					</el-submenu>

					<!-- 用户管理菜单组 -->
					<el-submenu index="3">
						<template slot="title"><i class="el-icon-menu"></i>用户管理</template>
						<el-menu-item index="3-1" @click.native="toHtml('userAdd.html')">
							<i class="el-icon-help"></i>添加用户
						</el-menu-item>
						<el-menu-item index="3-2" @click.native="toHtml('userList.html')">
							<i class="el-icon-help"></i>用户列表
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>

			<!-- 主内容区域 -->
			<el-container>
				<el-main>
					<!-- 内嵌iframe用于展示各功能页面 -->
					<iframe id="myframe" :src="iframeSrc" scrolling="none" frameborder="0"
							style="width: 100%;height:600px"></iframe>
				</el-main>
			</el-container>

		</el-container>
	</el-container>

	<!-- 个人资料对话框 -->
	<el-dialog title="个人资料" :visible.sync="userEditFormVisible">
		<el-form :model="userEditForm" ref="userEditForm">
			<el-form-item label="用户名称" prop="userName" :label-width="formLabelWidth">
				<el-input v-model="userEditForm.userName"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
				<el-radio v-model="userEditForm.gender" label="1" >男</el-radio>
				<el-radio v-model="userEditForm.gender" label="2" >女</el-radio>
			</el-form-item>
			<el-form-item label="出生日期" prop="birthday" :label-width="formLabelWidth">
				<el-date-picker
						v-model="userEditForm.birthday"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd" >
				</el-date-picker>
			</el-form-item>

			<el-form-item label="手机" prop="phone" :label-width="formLabelWidth">
				<el-input v-model="userEditForm.phone"></el-input>
			</el-form-item>
			<el-form-item label="地址" prop="address" :label-width="formLabelWidth">
				<el-input  v-model="userEditForm.address"></el-input>
			</el-form-item>
			<el-form-item label="用户头像" prop="headUrl" :label-width="formLabelWidth">
				<!-- 头像上传组件 -->
				<el-upload
						size="mini"
						class="avatar-uploader"
						v-bind:action="requestUrl"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">  <!-- 上传前校验 -->
					<img v-if="userEditForm.headUrl" :src="userEditForm.headUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="userEditFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="doUpdateUser()">确 定</el-button>
		</div>
	</el-dialog>

	<!-- 密码修改对话框 -->
	<el-dialog title="密码修改" :visible.sync="pwdEditFormVisible">
		<el-form :model="pwdEditForm" :rules="pwdEditRules" ref="pwdEditForm">
			<el-form-item label="旧密码" prop="userPassword" :label-width="formLabelWidth">
				<el-input type="password" v-model="pwdEditForm.userPassword"></el-input>
			</el-form-item>
			<el-form-item label="新密码" prop="newPwd" :label-width="formLabelWidth">
				<el-input  type="password"  v-model="pwdEditForm.newPwd"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmNewPwd" :label-width="formLabelWidth">
				<el-input type="password"  v-model="pwdEditForm.confirmNewPwd" ></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="pwdEditFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="doUpdatePwd('pwdEditForm')">确 定</el-button>
		</div>
	</el-dialog>

</div>
</body>
<script type="application/javascript">
	new Vue({
		el: '#div',  // 挂载到id为div的元素
		data: {
			iframeSrc: 'welcome.html',  // iframe默认显示的页面
			formLabelWidth: '120px',  // 对话框表单标签宽度

			// 个人资料对话框相关
			userEditFormVisible: false,  // 个人资料对话框显示状态
			userEditForm: {  // 个人资料表单数据
				gender: '1',  // 默认性别为男
				headUrl: 'img/face.png'  // 默认头像
			},

			// 密码修改对话框相关
			pwdEditFormVisible: false,  // 密码修改对话框显示状态
			pwdEditForm: {  // 密码修改表单数据
				userPassword: '',  // 旧密码
				newPwd: '',  // 新密码
				confirmNewPwd: ''  // 确认新密码
			},
			// 密码修改表单校验规则
			pwdEditRules: {
				userPassword: [{
					required: true,
					message: '请输入旧密码',
					trigger: 'blur'  // 失去焦点时校验
				}],
				newPwd: [{
					required: true,
					message: '请输入新密码',
					trigger: 'blur'
				}],
				confirmNewPwd: [{
					required: true,
					message: '请输入确认密码',
					trigger: 'blur'
				}]
			},

			// 登录用户信息（从localStorage获取）
			loginUser: {
				role: {},  // 角色信息（包含roleName等）
				userCode: "",  // 用户名
				headUrl: ""  // 头像地址
			},

			// 头像上传接口地址
			requestUrl: server_url + "api/upload"
		},
		methods: {
			// 侧边栏导航跳转（切换iframe内容）
			toHtml(page) {
				// 加时间戳解决iframe缓存问题
				let time = new Date().getTime();
				this.iframeSrc = page + "?t=" + time;
				console.log("导航至：", this.iframeSrc); // 调试日志
			},

			// 显示个人资料对话框
			showEditUserView() {
				this.userEditFormVisible = true;
				var loginUserStr = localStorage.getItem("loginUser");
				if (loginUserStr) {
					this.userEditForm = JSON.parse(loginUserStr);
					this.userEditForm.gender = this.userEditForm.gender.toString();
				}
			},

			// 头像上传成功回调
			handleAvatarSuccess(res, file) {
				console.log("上传成功响应：", res);
				this.userEditForm.headUrl = qiniu_url + res.data;
			},

			// 头像上传前校验：点击上传时提示“没做”
			beforeAvatarUpload(file) {
				this.$message.warning("没做");
				return false; // 阻止上传
			},

			// 提交个人资料修改 - 修改为PUT请求并调整URL
			doUpdateUser() {
				axios.put(
						server_url + "/api/user/profile",
						this.userEditForm,
						{
							headers: {
								'Content-Type': 'application/json'
							}
						}
				).then(resp => {
					if (resp.data.code === 0) {
						this.$message({message: resp.data.msg, type: 'success'});
						this.userEditFormVisible = false;
						localStorage.setItem("loginUser", JSON.stringify(this.userEditForm));
						this.loginUser = this.userEditForm; // 同步更新页面显示的用户信息
					}
				}).catch(err => console.log("更新失败：", err));
			},

			// 显示密码修改对话框
			showEditPwdView() {
				this.pwdEditFormVisible = true;
			},

			// 提交密码修改 - 调整参数传递方式
			doUpdatePwd(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.pwdEditForm.newPwd !== this.pwdEditForm.confirmNewPwd) {
							this.$message.warning("新密码和确认密码不一致");
							return;
						}
						var loginUser = JSON.parse(localStorage.getItem("loginUser"));
						axios.post(
								server_url + "/api/user/changePassword",
								{},
								{
									params: {
										id: loginUser.id,
										oldPassword: this.pwdEditForm.userPassword,
										newPassword: this.pwdEditForm.newPwd
									}
								}
						).then(resp => {
							if (resp.data.code === 0) {
								this.$message({
									message: resp.data.msg,
									type: 'success',
									onClose: this.logout
								});
								this.pwdEditFormVisible = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}).catch(err => console.log("修改密码失败：", err));
					}
				});
			},

			// 注销退出 - 修改为POST请求
			logout() {
				axios.post(server_url + "/api/user/logout")
						.then(resp => {
							if (resp.data.code === 0) {
								localStorage.removeItem("loginUser");
								window.location.href = "login.html";
							}
						})
						.catch(err => console.log("退出失败：", err))
						.finally(() => {
							// 无论请求成功与否都跳转登录页
							window.location.href = "login.html";
						});
			}
		},
		mounted: function() {
			// 从本地存储获取登录用户信息
			var loginUserStr = localStorage.getItem("loginUser");
			if (loginUserStr) {
				this.loginUser = JSON.parse(loginUserStr);
				// 确保角色信息存在，避免访问roleName报错
				if (!this.loginUser.role) this.loginUser.role = {};
				// 设置默认头像
				if (!this.loginUser.headUrl) this.loginUser.headUrl = "img/face.png";
			} else {
				// 未登录状态直接跳转登录页
				window.location.href = "login.html";
			}
		}
	});
</script>
</html>